<template>
  <div class="box">
    <div class="header">
      <van-icon name="arrow-left" class="icon" @click="Backe" />
      详情
    </div>
    <div class="main"></div>
    <div class="box1">
      <div class="one">
        <div class="top">
          <div style="width: 40%; box-sizing: border-box; padding: 10px 15px">
            <div style="font-size: 14px; color: rgb(129, 116, 116)">{{ detaildata.company }}</div>
            <div style="margin-top: 10px; font-size: 20px">{{ detaildata.name }}</div>
            <div style="display: flex; font-size: 12px; margin-top: 15px">
              <van-icon name="phone" size="15" color="#fa6368" />
              {{ detaildata.mobile }}
            </div>
            <div style="display: flex; font-size: 12px; margin-top: 15px; white-space: nowrap">
              <van-icon name="location" size="15" color="#ccc" />
              长江路105号东50米
            </div>
          </div>
          <div style="width: 60%; overflow: hidden">
            <img
              style="width: 100%; height: 100%; border-radius: 0 10px 10px 0"
              src="https://ts1.cn.mm.bing.net/th/id/R-C.3526df277cc1cfd3046b4035abf9c8a1?rik=KNt1E%2fgZibmNWA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50075%2f2921.jpg_wh860.jpg&ehk=3k3LeqReHo6LEUCD2S9YetcTfT0HlSXLVouAXm8ay3Q%3d&risl=&pid=ImgRaw&r=0"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="two">
        <div class="two_1">
          <div style="display: flex">
            <div
              :class="indexs === index ? 'ons' : 'on'"
              v-for="(item, index) in tabs"
              :key="index"
              @click="Tabson(index)"
            >
              {{ item }}
            </div>
          </div>
          <div>
            <span style="color: #ccc">房源：</span>
             17
          </div>
        </div>
        <div v-show="indexs === 0 ? true : false" style="width: 100%; height: 100%; overflow: scroll">
          <div
            style="
              width: 100%;
              height: 120px;
              border-bottom: 1px solid #ccc;
              box-sizing: border-box;
              padding: 10px 0;
              display: flex;
            "
            v-for="(item, index) in detailList"
            :key="index"
          >
            <div style="width: 35%; height: 100%">
              <img :src="item.img" style="width: 100%; height: 100%; border-radius: 10px" alt="" />
            </div>
            <div style="width: 65%; height: 100%; box-sizing: border-box; padding: 5px 5px">
              <div>{{ item.area }}</div>
              <div style="display: flex; justify-content: space-between; font-size: 12px">
                <p style="white-space: nowrap">{{ item.house_type }} | 96m<sup>2</sup></p>
                <p style="white-space: nowrap">{{ item.name }}</p>
              </div>
              <div style="display: flex; justify-content: space-between; font-size: 12px">
                <div style="white-space: nowrap; color: #ccc">
                  <span style="color: red; font-size: 16px">{{ item.price }}</span
                  ><span style="color: #000">万</span> 11458.33/m<sup>2</sup>
                </div>
                <div style="white-space: wrap; color: #ccc">2天前</div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="indexs === 1 ? true : false" style="width: 100%; height: 100%; overflow: scroll">
          <div
            style="
              width: 100%;
              height: 120px;
              border-bottom: 1px solid #ccc;
              box-sizing: border-box;
              padding: 10px 0;
              display: flex;
            "
            v-for="(item, index) in zufangList"
            :key="index"
          >
            <div style="width: 35%; height: 100%">
              <img :src="item.img" style="width: 100%; height: 100%; border-radius: 10px" alt="" />
            </div>
            <div style="width: 65%; height: 100%; box-sizing: border-box; padding: 5px 5px">
              <div>{{ item.area }}</div>
              <div style="display: flex; justify-content: space-between; font-size: 12px">
                <p style="white-space: nowrap">{{ item.house_type }} | 96m<sup>2</sup></p>
                <p style="white-space: nowrap">{{ item.name }}</p>
              </div>
              <div style="display: flex; justify-content: space-between; font-size: 12px">
                <div style="white-space: nowrap; color: #ccc">
                  <span style="color: red; font-size: 16px">{{ item.price }}</span
                  ><span style="color: #000">万</span> 11458.33/m<sup>2</sup>
                </div>
                <div style="white-space: wrap; color: #ccc">2天前</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
       <div>
        <van-icon name="share" size="20" />
       </div>
       <div>
            <button @click="navmete" style="width: 80px; height: 30px;font-size: 14px; background:linear-gradient(90deg, #FFCD1E, #FF8A18) ; border-radius: 15px 0 0 15px; color: #fff; border: none;">
             在线咨询          
             </button>
             <button @click="navPhone" style="width: 80px; height: 30px;  font-size: 14px;background:linear-gradient(90deg, #FE6035, #EF1224); border-radius: 0 15px 15px 0; color: #fff; border: none;">
              电话资讯
             </button>
       </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { ref, reactive, onMounted } from 'vue';
import { GET_Housetwohand } from '../../../api/index';
import {GET_renting} from '../../../api/index'
//注册详情页的数据
const detaildata = ref();
//注册接收路由参数
const route = useRoute();
const router = useRouter();
//拿到路由参数
const data: any = route.query.data;
//转成对象格式
const dedata = JSON.parse(data);
//把参数赋值给存放详情页的数据
detaildata.value = dedata;
console.log(detaildata.value);
//tab切换数据
const tabs = ref(['卖房', '租房']);
//切换下标
const indexs = ref(0);
//接收数据
let detailList = ref<any>();
//接收租房数据
let zufangList = ref<any>();

//页面回退
const Backe = () => {
  router.push('/leaderboard');
};
//tab切换下标
const Tabson = (index: number) => {
  indexs.value = index;
};
//调用接口
onMounted(() => {
  //二手房数据
  const ershou = async () => {
    const res = await GET_Housetwohand();
    console.log(res, '===============res');
    if (res.status === 200) {
      detailList.value = res.data.data;
      console.log(detailList, '===================data');
    }
  };
  ershou();
 //租房数据
 const zufang = async()=>{
   const res = await GET_renting();
   console.log(res,'===================租房数据');
   if(res.status === 200){
    zufangList.value = res.data.data;
    console.log(zufangList,'=========================>zufnag ');
   }
  
 }
 zufang();
 
});

//跳转到消息页面
const navmete = ()=>{
  router.push('/chat')
}

//跳转到电话页
const navPhone = ()=>{
  router.push('/phone');
}
</script>

<style scoped lang="scss">
.box {
  width: 100vw;
  height: 100vh;
  background-color: #2391f9;
  overflow: hidden;
  .header {
    width: 100vw;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: relative;
    z-index: 999999999;
    .icon {
      position: absolute;
      top: 50%;
      left: 10%;
      transform: translate(-50%, -50%);
      cursor: pointer;
    }
  }
  .main {
    width: 500%;
    height: 500%;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    left: -200%;
    top: 10%;
  }
  .box1 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    .one {
      width: 85%;
      height: 450px;
      margin: 0 auto;

      .top {
        width: 100%;
        height: 150px;
        background-color: #f7f7f7;
        margin-top: 60px;
        border-radius: 15px;
        box-shadow: 0 0 2px 2px #ccc;
        display: flex;
        img {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
        }
      }
    }
    .two {
      width: 85%;
      height: 100%;
      margin: 50px auto;
      .two_1 {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        .on {
          margin-right: 30px;
        }
        .ons {
          font-weight: bold;
          font-size: 18px;
          margin-right: 30px;
        }
      }
    }

    .bottom {
      width: 85%;
      height: 50px;
      background-color: #fff;
      position: fixed;
      bottom: -1px;
      left: 7%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
